<template>
  <div class="list-table">
    <el-form ref="queryForm" :model="queryParams" :inline="true" :rules="queryRules">
      <el-form-item :label="$t('开始年')" prop="startYear" label-width="68">
        <DatePicker v-model="queryParams.startYear" type="year" value-format="yyyy" :placeholder="$t('开始-年')" />
      </el-form-item>
      <el-form-item :label="$t('结束年')" prop="endYear" label-width="68">
        <DatePicker v-model="queryParams.endYear" type="year" value-format="yyyy" :placeholder="$t('结束-年')" />
      </el-form-item>
      <el-form-item :label="$t('报告周期')" prop="type" label-width="68">
        <el-select v-model="queryParams.type" value="" :placeholder="$t('报告周期')" clearable>
          <el-option
            v-for="dict in typeOptions"
            :key="dict.dictValue"
            :label="$t(dict.dictLabel)"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('科目名称')" prop="keyName">
        <el-input
          v-model="queryParams.keyName"
          :placeholder="$t('科目名称')"
          clearable
          @keyup.enter.native="queryHandle"
        />
      </el-form-item>
      <el-form-item :label="$t('数据来源')" prop="dataSource">
        <el-select v-model="queryParams.dataSource" value="" :placeholder="$t('数据来源')">
          <el-option
            v-for="dict in dataSourceOptions"
            :key="dict.dictValue"
            :label="$t(dict.dictLabel)"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('数据变动')" prop="dataSource">
        <el-checkbox-group v-model="changeGroup" size="mini">
          <el-checkbox-button v-for="change in changeOptions" :key="change" :label="change">{{ change }}</el-checkbox-button>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
        <el-button v-hasPermi="['company:pcw:view']" icon="el-icon-search" size="mini" @click="selectKey">{{ $t('选择关注科目') }}</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="loading"
      :data="responseData.row"
      row-key="id"
      border
      :height="pcwHeight"
      default-expand-all
      style="overflow: auto"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column
        prop="keyName"
        :label="$t('科目名称')"
        min-width="200"
        header-align="center"
        show-overflow-tooltip
      />
      <template v-for="(item) in responseData.column">
        <el-table-column
          v-if="ifs(item)"
          :key="item"
          :prop="item"
          :label="tableTitle(item)"
        >
          <template v-slot="scope">
            <span v-if="scope.row[item] !== 0">{{ moneyFormat(scope.row[item]) }}</span>
            <i v-if="scope.row[item] > 0 && item.indexOf('change') > -1" class="el-icon-top" style="color:#e74c3c !important;" />
            <i v-else-if="scope.row[item] < 0 && item.indexOf('change') > -1" class="el-icon-bottom" style="color:#16a085 !important;" />
            <i v-if="!scope.row[item] || scope.row[item] === 0" class="el-icon-zero"> - </i>
          </template>
        </el-table-column>
      </template>
    </el-table>

    <!-- 添加或修改上传财务数据主表对话框 -->
    <el-dialog :title="$t('选择科目')" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogKey" append-to-body>
      <pcwDetailsFocusList ref="pcwDetailsFocusList" :company-id="companyId" />
    </el-dialog>
    <!-- 查看科目季度变化对话框 -->
    <!-- <el-dialog :title="$t('科目分析')" :visible.sync="formOpenChart" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <pcwAnalyzeChart ref="pcwAnalyzeChart" :company-id="companyId" />
    </el-dialog> -->
  </div>
</template>

<script>
import { financialAnalysis } from '@/api/company/pcw/pcwDetailsFocus'
  import pcwDetailsFocusList from './pcwDetailsFocusList.vue'
  // import pcwAnalyzeChart from './pcwAnalyzeChart.vue'
  const changeOptions = ['环比', '同比']
  export default {
    components: {
      pcwDetailsFocusList
      // pcwAnalyzeChart
    },
    props: {
      companyId: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        // 遮罩层
        loading: false,
        // 总条数
        total: 0,
        // 上传财务数据主表表格数据
        pcwDataList: [],
        // 弹出层标题
        title: '',
        // 科目分析标题
        titleChart: '',
        // 是否显示科目分析弹出层
        formOpenChart: false,
        // 是否显示弹出层
        formOpen: false,
        // 查询参数
        queryParams: {
          companyId: this.companyId,
          startYear: new Date().getFullYear() - 5 + '',
          endYear: new Date().getFullYear() + '',
          type: '12',
          dataSource: 'act'
        },
        // 表单参数
        form: {},
        // 报告类型
        typeOptions: [],
        // 表单校验
        rules: {},
        // 上一年份
        prevYear: '',
        // 当前年份
        thisYear: '',
        pcwHeight: window.innerHeight - 200,
        responseData: {},
        queryRules: {
          startYear: { required: true, message: this.$t('必填信息'), trigger: 'blur' },
          endYear: { required: true, message: this.$t('必填信息'), trigger: 'blur' },
          type: { required: true, message: this.$t('必填信息'), trigger: ['blur', 'change'] }
        },
        dataSourceOptions: [],
        changeOptions: changeOptions,
        changeGroup: ['同比']
      }
    },
    watch: {
      companyId: {
        handler(val) {
          if (val) {
            this.queryParams.companyId = val
            this.queryHandle()
          }
        },
        deep: true,
        immediate: true
      }
    },
    created() {
      // 财务数据报告周期
      this.getDicts('financial_type').then(response => {
        this.typeOptions = response.data
      })
      this.getDicts('pcw_data_source').then(response => {
        this.dataSourceOptions = response.data
      })
    },
    mounted() {
    },
    methods: {
      /** 查询上传财务数据主表列表 */
      getList() {
        this.$refs.queryForm.validate(valid => {
          if (valid) {
            this.loading = true
            if (this.queryParams.yearE !== '' && this.queryParams.yearE !== undefined) {
              this.thisYear = this.queryParams.yearE
              this.prevYear = this.thisYear - 1
            }
            financialAnalysis(this.queryParams).then(response => {
              this.responseData = response.data
              this.loading = false
            })
          }
        })
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          companyId: this.companyId,
          year: undefined,
          type: undefined,
          attachmentId: undefined,
          createBy: undefined,
          createTime: undefined,
          updateBy: undefined,
          updateTime: undefined,
          delFlag: undefined,
          remark: undefined
        }
        this.resetForm('form')
      },
      /** 搜索按钮操作 */
      queryHandle() {
        this.$nextTick(() => {
          this.getList()
        })
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm('queryForm')
        this.queryHandle()
      },
      // 选择关注科目
      selectKey() {
        this.formOpen = true
        this.$nextTick(() => {
          // 调用form页面的 init 方法初始化数据
          this.$refs.pcwDetailsFocusList.getList()
        })
      },
      // 科目分析
      analyzeKey(row) {
        this.formOpenChart = true
        this.$nextTick(() => {
          // 调用form页面的 init 方法初始化数据
          this.$refs.pcwAnalyzeChart.queryParams.yearE = this.queryParams.yearE
          this.$refs.pcwAnalyzeChart.queryParams.keyCode = row.id
          this.$refs.pcwAnalyzeChart.queryParams.companyId = this.companyId
          this.$refs.pcwAnalyzeChart.getList(row)
        })
      },
      typeFormat(type) {
        return this.selectDictLabel(this.typeOptions, type)
      },
      tableTitle(item) {
        if (item.indexOf('_change') > -1) {
            return this.$t('同比变动')
        } else if (item.indexOf('_moMchange') > -1) {
              return this.$t('环比变动')
        } else {
          return item + '-' + this.typeFormat(this.queryParams.type)
        }
      },
      ifs(label) {
        if (label.indexOf('change') >= 0) {
            return this.changeGroup.includes(this.tableTitle(label).substring(0, 2))
        }
      return true
    }
    }
  }
</script>
<style scoped>
.el-icon-bottom{
  color:#1abc9c !important;
   font-size: 16px;
}
.el-icon-top {
  color:#e74c3c !important;
  font-size: 16px;
}
</style>
